<template>
	<div class="live-calendar"  element-loading-background="rgba(255, 255, 255, 0.78)">
		<!-- <div class="month-switch">
			<img
				class="icon"
				:class="disablePrevBtn ? 'prev-disabled' : ''"
				src="../../../assets/images/prev.png"
				alt="prev"
				@click="loadPrevMonthDays"
			/>
			<p class="date">
				<span class="year">{{ date.year }}年</span>
				<span class="month">{{ date.month }}月</span>
			</p>
			<img class="icon" src="../../../assets/images/next.png" alt="next" @click="loadNextMonthDays" />
		</div>
		<div class="weeks">
			<span v-for="week in weeks" :key="week">{{ week }}</span>
		</div>
		<div class="calendar">
			<div
				v-for="(item, index) in days"
				:key="index"
				class="day"
				:class="{ 'has-live': item.liveInfo, start: item.liveInfo && item.liveInfo.liveStatus === 'Start' }"
			>
				<template v-if="item.liveInfo">
					<div class="ref" @click="gotoLiveRoom(item)">
						<div class="top">
							<span :class="!item.isCurrentMonth ? 'not-current-month' : ''">{{ item.day }}</span>
							<div v-if="item.liveInfo.liveStatus === 'Start'" class="icon start"></div>
							<div v-if="item.liveInfo.liveStatus === 'Finish'" class="icon finish"></div>
							<div v-if="item.liveInfo.liveStatus === 'NotStart'" class="icon no-start"></div>
						</div>
						<p class="live-name" :class="item.liveInfo.liveStatus === 'NotStart' ? 'no-start' : ''">
							{{ item.liveInfo.liveName }}
						</p>
					</div>
					<div class="popover">
						<p class="popover-live-name">主题：{{ item.liveInfo.liveName }}</p>
						<p class="popover-live-theme">类型：{{ item.liveInfo.liveThemeName }}</p>
						<p class="popover-live-date">时间：{{ item.liveInfo.liveDate }}</p>
						<div class="popover-goto-live-btn" @click="gotoLiveRoom(item)">
							<span>进入直播间></span>
						</div>
						<div v-if="item.liveInfo.recommend.length" class="popover-recommend">
							<p>推荐产品</p>
							<el-scrollbar class="product-list-scroll-wrap">
								<div class="product-list">
									<a
										v-for="product in item.liveInfo.recommend"
										:key="product.id"
										class="product-item"
										:href="product.bulletinUrl"
										target="__blank"
									>
										<img :src="product.bulletinImage" :alt="product.bulletinProduct" />
									</a>
								</div>
							</el-scrollbar>
						</div>
					</div>
				</template>
				<div v-else class="top">
					<span :class="!item.isCurrentMonth ? 'not-current-month' : ''">{{ item.day }}</span>
				</div>
			</div>
		</div> -->
	</div>
</template>

<script lang="ts">
// import { computed, onMounted } from "vue";

// const getYearMonthDay = (date = new Date()) => {
// 	const year = date.getFullYear();
// 	const month = date.getMonth() + 1;
// 	const day = date.getDate();
// 	return { year, month, day };
// };

// interface Date {
// 	year: number;
// 	month: number;
// 	day: number;
// }

// export default {
// 	name: "LiveCalendar",
// 	setup() {
// 		const date: Date = {
// 			year: 0,
// 			month: 0,
// 			day: 0,
// 		};
// 		let loading: boolean = false;
// 		let weeks = ["日", "一", "二", "三", "四", "五", "六"];
// 		let days: Array<{ day: string }> = new Array(42).fill({ day: "" });

// 		const disablePrevBtn = computed(() => date.year <= 1970 && date.month === 1);

// 		const getLiveCalendar = async () => {
// 			const params = {
// 				nowDate: `${date.year}-${date.month < 10 ? "0" + date.month : date.month}`,
// 				pageIndex: 1,
// 				pageSize: 50,
// 			};
// 			// const result = await this.$http.home.getLiveCalendar(params);

// 			// if (result.result && result.code === "200") {
// 			// 	if (result.data.content.length) {
// 			// 		this.insterMonthDays(result.data.content);
// 			// 	}

// 			// 	this.loading = false;
// 			// } else {
// 			// 	this.loading = false;
// 			// }
// 		};

// 		const generateMonthDays = () => {
// 			loading = true;
// 			// 获取当月第一天是周几
// 			const firstWeekDay = new Date(date.year, date.month - 1, 1).getDay();
// 			const startDate = new Date(date.year, date.month - 1, 1).getDate() - firstWeekDay * 24 * 60 * 60 * 1000;

// 			// 生成所有日期
// 			const days = [];
// 			for (let i = 0; i < 42; i++) {
// 				const nowDate = new Date(startDate + i * 24 * 60 * 60 * 1000);
// 				days.push({
// 					nowDate,
// 					year: nowDate.getFullYear(),
// 					month: nowDate.getMonth() + 1,
// 					day: nowDate.getDate(),
// 					date: `${nowDate.getFullYear()}-${
// 						nowDate.getMonth() + 1 < 10 ? "0" + (nowDate.getMonth() + 1) : nowDate.getMonth() + 1
// 					}-${nowDate.getDate() < 10 ? "0" + nowDate.getDate() : nowDate.getDate()}`,
// 					isCurrentMonth: nowDate.getMonth() + 1 === date.month,
// 					isCurrentDay:
// 						nowDate.getFullYear() === date.year &&
// 						nowDate.getMonth() + 1 === date.month &&
// 						nowDate.getDate() === date.day,
// 				});
// 			}

// 			getLiveCalendar();
// 		};
// 		const loadPrevMonthDays = () => {
// 			if (disablePrevBtn) return;

// 			if (date.month === 1) {
// 				date.year--;
// 				date.month = 12;
// 			} else {
// 				date.month--;
// 			}

// 			const { year, month, day } = getYearMonthDay(new Date(date.year, date.month - 1, 1));
// 			date.year = year;
// 			date.month = month;
// 			date.day = day;

// 			generateMonthDays();
// 		};
// 		const loadNextMonthDays = () => {
// 			if (date.month === 12) {
// 				date.year++;
// 				date.month = 1;
// 			} else {
// 				date.month++;
// 			}

// 			const { year, month, day } = getYearMonthDay(new Date(date.year, date.month - 1, 1));
// 			date.year = year;
// 			date.month = month;
// 			date.day = day;

// 			generateMonthDays();
// 		};
// 		onMounted(() => {
// 			// 生成当月日历
// 			const { year, month, day } = getYearMonthDay();
// 			date.year = year;
// 			date.month = month;
// 			date.day = day;

// 			generateMonthDays();
// 		});

// 		return {
// 			date,
// 			disablePrevBtn,
// 			loading,
// 			weeks,
// 			days,
// 		};
// 	},

// 	methods: {
// 		insterMonthDays(data: any) {
// 			data.forEach((item: any) => {
// 				const date = item.startDate.split(" ")[0];

// 				// this.days.forEach((day: { date: string }) => {
// 				// 	if (date === day.day.date) {
// 				// 		const liveInfo = {
// 				// 			liveId: item.liveId,
// 				// 			liveName: item.liveName,
// 				// 			liveStatus: item.liveStatus,
// 				// 			liveThemeName: item.liveThemeName,
// 				// 			liveDate: `${date} ${item.startDate.split(" ")[1].substring(0, 5)}-${item.endDate
// 				// 				.split(" ")[1]
// 				// 				.substring(0, 5)}`,
// 				// 			recommend: item.bulletinBoard,
// 				// 		};

// 				// 		// this.$set(this.days[index], "liveInfo", liveInfo);
// 				// 	}
// 				// });
// 			});
// 		},
// 		gotoLiveRoom(data: { liveInfo: any }) {
// 			if (!data.liveInfo) return;

// 			// const { href } = this.$router.resolve({
// 			// 	path: "/live.html",
// 			// 	query: {
// 			// 		liveId: data.liveInfo.liveId,
// 			// 	},
// 			// });
// 			// window.open(href, "_blank");
// 		},
// 	},
// };
</script>

<style lang="scss" scoped>
.live-calendar {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	margin-left: 10px;
	width: calc(44% - 10px);
	height: 100%;
	padding: 10px;
	box-sizing: border-box;
	background-color: #fff;

	> .month-switch {
		display: flex;
		justify-content: center;
		align-items: center;

		> .icon {
			width: 9px;
			height: 15px;
			cursor: pointer;

			&.prev-disabled {
				opacity: 0.36;
				cursor: no-drop;
			}
		}

		.date {
			margin: 0 12px;
			font-weight: normal;
			font-size: 16px;
			color: #9f9f9f;

			.year {
				margin-right: 14px;
			}
		}
	}

	> .weeks {
		margin: 14px 0;
		display: flex;
		justify-content: flex-start;

		> span {
			flex: 1;
			padding-left: 8px;
			font-size: 14px;
			color: #9f9f9f;
		}
	}

	> .calendar {
		flex: 1;
		display: flex;
		justify-content: flex-start;
		flex-wrap: wrap;
		border-top: 1px solid #dbdbdb;
		border-left: 1px solid #dbdbdb;

		> .day {
			flex: 1 1 calc(100% / 7);
			position: relative;
			height: calc(100% / 6);
			border-right: 1px solid #dbdbdb;
			border-bottom: 1px solid #dbdbdb;
			padding: 2px;
			transition: all 0.12s ease-in-out;

			&.start {
				background-color: red !important;

				.ref .top,
				.ref .live-name {
					color: #fff !important;
				}

				.icon.start {
					background-image: url("../../../assets/images/start.png") !important;
				}
			}

			&.has-live {
				cursor: pointer;

				&:hover {
					background-color: #d7e7f4;

					> .popover {
						opacity: 1;
						bottom: 0;
						pointer-events: visible;
					}

					.icon.finish {
						background-image: url("../../../assets/images/finish@hover.png");
					}
				}

				> .popover {
					position: absolute;
					bottom: -50%;
					left: 0;
					z-index: 300;
					transform: translateX(-100%);
					width: 320px;
					padding: 16px;
					box-sizing: border-box;
					border-radius: 4px;
					background-color: #fff;
					box-shadow: 0 2px 4px 2px rgba(0, 0, 0, 0.12);
					cursor: auto;
					opacity: 0;
					transition: all 0.32s ease-in-out, z-index 0s;
					pointer-events: none;

					> * {
						margin: 8px;

						&:last-of-type {
							margin-bottom: 0;
						}
					}

					> p {
						font-weight: normal;
						font-size: 14px;
						color: #5c5c5c;
					}

					.popover-goto-live-btn {
						display: inline-block;
						padding: 4px 12px;
						background-color: #43aeff;
						color: #fff;
						cursor: pointer;
					}

					.popover-recommend {
						> p:first-of-type {
							position: relative;
							font-size: 15px;
							color: #43aeff;
							padding-bottom: 8px;
							margin-bottom: 8px;

							&::after {
								content: "";
								position: absolute;
								left: 0;
								bottom: 0;
								width: 100%;
								height: 2px;
								background-color: #e4e7ed;
							}
						}

						.product-list-scroll-wrap {
							/deep/ .el-scrollbar__wrap {
								overflow-x: hidden;
							}
						}

						.product-list {
							display: flex;
							justify-content: flex-start;
							flex-wrap: wrap;

							.product-item {
								flex: 0 0 calc((100% - 6px * 4) / 5);
								margin-right: 6px;
								margin-bottom: 6px;
								border: 1px solid #e4e7ed;
								overflow: hidden;

								&:nth-child(5n + 5) {
									margin-right: 0;
								}

								> img {
									width: 100%;
								}
							}
						}
					}
				}
			}

			.top {
				display: flex;
				justify-content: space-between;
				padding-left: 6px;
				font-size: 14px;
				font-weight: bold;
				color: #9f9f9f;

				> .not-current-month {
					color: #ccc;
					opacity: 0.68;
				}

				> .icon {
					width: 14px;
					height: 14px;
					background-size: cover;
					background-repeat: no-repeat;
					background-position: center;

					&.finish {
						background-image: url("../../../assets/images/finish.png");
					}

					&.no-start {
						width: 16px;
						height: 16px;
						background-image: url("../../../assets/images/nostart.png");
					}
				}
			}

			.ref {
				width: 100%;
				height: 100%;
			}

			.ref > .live-name {
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 3;
				overflow: hidden;
				font-weight: lighter !important;
				font-size: 12px;
				color: #888;
				word-break: break-all;

				&.no-start {
					color: #7fc8fc;
				}
			}
		}
	}
}
</style>
